<template>
  <div>
    <FootComponen></FootComponen>
    <div class="homeapp">
      <div class="hrea">
        <div class="log"></div>
        <div class="sarch" @click="search"></div>
      </div>
      <div class="nav">
        <!-- <van-tabs v-model="active" animated sticky>
          <van-tab title="首页">
            
            <div class="swipe-s">
              <div class="swipe-s1">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item
                    v-for="item in homeswipelist.data"
                    :key="item.name"
                  >
                    <img :src="item.image" />
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            
            <div class="selected">
              <div class="selected-hred">
                <img
                  src="http://im05.nanyibang.com/7f53299f09bdf08f77951c041deb9701.octet-stream"
                  alt=""
                />
              </div>
              <div class="selected-content">
                <ul>
                  <li
                    v-for="item in selectedlist"
                    :key="item.image"
                    @click="Jump_list(item.link, item.name)"
                  >
                    <img :src="item.image" alt="" />
                  </li>
                </ul>
              </div>
            </div>
     
            <div class="spring">
              <div class="spring-hrad">
                <img src="../../public/assets/images/qj.png" alt="" />
              </div>
              <div
                class="spring-content"
                v-for="item in springlist_1"
                :key="item.image"
              >
                <div class="spring-content1">
                  <img :src="item.image" alt="" />
                </div>
                <div class="spring-content2">
                  <ul>
                    <li v-for="i in item.data" :key="i.image">
                      <img :src="i.image" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
        
            <div class="theme">
              <div class="theme-hrad">
                <img src="../../public/assets/images/jx2.png" alt="" />
              </div>
              <div
                class="spring-content"
                v-for="item in themelist_1"
                :key="item.image"
              >
                <div class="spring-content1">
                  <img :src="item.image" alt="" />
                </div>
                <div class="spring-content2">
                  <ul>
                    <li v-for="i in item.data" :key="i.image">
                      <img :src="i.image" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            
            <div class="Navigation">
              <van-tabs v-model="active2" animated @click="onClick">
                <van-tab
                  v-for="i in Navigationlist"
                  :key="i.link"
                  :title="i.name"
                >
                  <ul>
                    <li v-for="item in navlist" :key="item.id">
                      <div><img :src="item.cover" alt="" /></div>
                      <div class="text1">{{ item.name }}</div>
                      <div class="text2">{{ item.sales }}人想买</div>
                      <div class="text3">
                        <span class="span1">￥{{ item.coupon_price }}</span>
                        <span class="span2">￥{{ item.price }}</span>
                      </div>
                    </li>
                  </ul>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab> -->
          <!-- <van-tab title="双十一">内容 2</van-tab>

          <van-tab title="鞋包配饰">内容 3</van-tab>
          <van-tab title="热门商品">内容 4</van-tab> -->
        <!-- </van-tabs> -->

      <!-- 轮播 -->
            <div class="swipe-s">
              <div class="swipe-s1">
                <van-swipe
                  class="my-swipe"
                  :autoplay="3000"
                  indicator-color="white"
                >
                  <van-swipe-item
                    v-for="item in homeswipelist.data"
                    :key="item.name"
                  >
                    <img :src="item.image" />
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 精选单品 -->
            <div class="selected">
              <div class="selected-hred">
                <img
                  src="http://im05.nanyibang.com/7f53299f09bdf08f77951c041deb9701.octet-stream"
                  alt=""
                />
              </div>
              <div class="selected-content">
                <ul>
                  <li
                    v-for="item in selectedlist"
                    :key="item.image"
                    @click="Jump_list(item.link, item.name)"
                  >
                    <img :src="item.image" alt="" />
                  </li>
                </ul>
              </div>
            </div>
            <!-- 秋季新品 -->
            <div class="spring">
              <div class="spring-hrad">
                <img src="../../public/assets/images/qj.png" alt="" />
              </div>
              <div
                class="spring-content"
                v-for="item in springlist_1"
                :key="item.image"
              >
                <div class="spring-content1"  @click="Jump_list(item.link, item.name)">
                  <img :src="item.image" alt="" />
                </div>
                <div class="spring-content2">
                  <ul>
                    <li v-for="i in item.data" :key="i.image" >
                      <img :src="i.image" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- 精选系列 -->
            <div class="theme">
              <div class="theme-hrad">
                <img src="../../public/assets/images/jx2.png" alt="" />
              </div>
              <div
                class="spring-content"
                v-for="item in themelist_1"
                :key="item.image"
              >
                <div class="spring-content1"  @click="Jump_list(item.link, item.name)">
                  <img :src="item.image" alt="" />
                </div>
                <div class="spring-content2">
                  <ul>
                    <li v-for="i in item.data" :key="i.image"  >
                      <img :src="i.image" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <!-- 底部商品 -->
            <div class="Navigation">
              <van-tabs v-model="active2" animated @click="onClick">
                <van-tab
                  v-for="i in Navigationlist"
                  :key="i.link"
                  :title="i.name"
                >
                  <ul>
                   
                    <li v-for="item in navlist" :key="item.id" @click="Jump_alis(item.id)">
                      <div><img :src="item.cover" alt="" /></div>
                      <div class="text1">{{ item.name }}</div>
                      <div class="text2">{{ item.sales }}人想买</div>
                      <div class="text3">
                        <span class="span1">￥{{ item.coupon_price }}</span>
                        <span class="span2">￥{{ item.price }}</span>
                      </div>
                    </li>
                   
                  </ul>
                </van-tab>
              </van-tabs>
            </div>



      </div>
    </div>
  </div>
</template>
<script>
import FootComponen from "../components/FootComponen.vue";
import { getTopLists, getnavbarlist } from "../api/home.js";
export default {
  components: {
    FootComponen,
  },
  data() {
    return {
      active: 0,
      active2: 0,
      homelist: "", //首页数组
      homeswipelist: "", //首页轮播数组
      selectedlist: "", //精选单品数组
      springlist: "", //秋季新品
      springlist_1: [],
      springlist_2: [],
      springlist_3: [],
      themelist: "", //精选系列
      themelist_1: [],
      themelist_2: [],

      Navigationlist: "", //底部商品
      navaid: 323, //底部商品切换id
      navlist: "",
      navdata: [
        {
          name: "热门商品",
          link: 323,
        },
        {
          name: "每日上新",
          link: 324,
        },
        {
          name: "人气榜单",
          link: 326,
        },
        {
          name: "潮牌箱包",
          link: 325,
        },
      ],
    };
  },
  methods: {
    //跳转搜索
    search() {
      this.$router.push({ name: "search" });
    },
    init() {
      getTopLists().then((data) => {
        console.log(data.data);
        //轮播
        this.homelist = data.data;
        this.homeswipelist = this.homelist[0];
        //精选
        this.selectedlist = data.data[4].data;
        this.selectedlist.shift();
        // 秋季新品
        this.springlist = data.data[5].data;
        this.springlist_1.push(this.springlist[0]);
        this.springlist_1.push(this.springlist[4]);
        this.springlist.forEach((item, i) => {
          if (i == 1 || i == 2 || i == 3) {
            this.springlist_2.push(item);
          }
        });
        this.springlist.forEach((item, i) => {
          if (i == 5 || i == 6 || i == 7) {
            this.springlist_3.push(item);
          }
        });

        this.springlist_1[0].data = this.springlist_2;
        this.springlist_1[1].data = this.springlist_3;

        // 精选系列
        this.themelist = data.data[6].data;
        this.themelist_1.push(this.themelist[0]);
        this.themelist.forEach((item, i) => {
          if (i == 1 || i == 2 || i == 3) {
            this.themelist_2.push(item);
          }
        });
        this.themelist_1[0].data = this.themelist_2;

        //底部商品
        this.Navigationlist = data.data[10].data;
        console.log(this.Navigationlist);
      });
    },
    //底部商品列表
    getnavlist() {
      getnavbarlist({ page: 1, aid: this.navaid }).then((data) => {
        this.navlist = data.data.data;
      });
    },
    //底部商品aid
    onClick(name, title) {
      this.navdata.forEach((item) => {
        if (title == item.name) {
          this.navaid = item.link;
          // console.log(this.navaid);
          return;
        }
      });
    },

    //跳转到商品列表
    Jump_list(link, name) {
      if (link == "http://nanz1.cp.axttt.com/man/?spm=w.index.nav") {
        this.$toast("该内容不宜未成年人查看");
        return;
      }
      this.$router.push({ name: "list" });
      this.$emit("getlink1", link);
      this.$emit("getaidname", name);
    },
       //跳转到商品详情页
    Jump_alis(id){
console.log(id);
      this.$emit('getalisid',id)
      this.$router.push({name:'alis'})
       
    } ,
  },
  created() {
    this.init(); //主页初始化
    this.getnavlist(); //底部商品初始化
  },
  watch: {
    navaid() {
      this.getnavlist();
    },
  },
};
</script>
<style scoped>
.homeapp {
  height: 3000px;
}
.hrea {
  width: 100%;
  height: 50px;
  background-color: rgb(27, 36, 45);
  display: flex;
}
.log {
  width: 50px;
  height: 100%;
  line-height: 50px;
  color: #fff;
  margin-left: 20px;
  margin-right: 250px;
  background: url('../../public/assets/images/_k.png') no-repeat;
  background-size: 100% 100%;
}
.sarch {
  width: 30px;
  height: 30px;
  background: url(../../public/assets/images/search.png);
  background-size: 100% 100%;
  margin-top: 10px;
  background-position: -1px 0px;
}
.nav {
  width: 100%;
}
.nav >>> .van-tabs__line {
  background-color: rgb(27, 36, 45);
  height: 1px;
}
.swipe-s {
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0px 10px;
}
.swipe-s1 {
  margin-top: 5px;
  width: 100%;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
}
.my-swipe .van-swipe-item {
  color: rgb(255, 255, 255);
  font-size: 20px;

  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 176px;
}
.selected {
  box-sizing: border-box;
  padding: 0px 10px;
  margin-bottom: 10px;
}
.selected-hred,
.spring-hrad,
.theme-hrad {
  width: 100%;
  height: 30px;
  margin-top: 5px;
}
.selected-hred img,
.spring-hrad img,
.theme-hrad img {
  width: 100%;
  height: 100%;
}

.selected-content ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.selected-content ul li {
  width: 30%;
  height: 130px;
  margin: 10px 5px;
}
.selected-content ul li img {
  width: 100%;
  height: 100%;
}
.spring {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px;
}
.spring-content1 {
  width: 100%;
  height: 140px;
  margin-top: 5px;
}
.spring-content1 img {
  width: 100%;
  height: 100%;
}
.spring-content2 ul {
  justify-content: space-between;
  display: flex;
  margin-top: 10px;
}
.spring-content2 ul li {
  width: 114px;
  height: 110px;
}
.spring-content2 ul li img {
  width: 100%;
  height: 100%;
}
.theme,
.preferential,
.Navigation {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 10px;
  background: rgb(247, 247, 247);
}
.preferential-content {
  width: 100%;
}
.preferential-content ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.preferential-content ul li {
  width: 49%;
  height: 117px;
  margin-bottom: 5px;
}
.preferential-content ul li img {
  width: 100%;
  height: 100%;
}
.Navigation >>> .van-tabs__line {
  background-color: rgb(255, 3, 3);
  height: 3px;
  /* display: none; */
}
.Navigation {
  border-radius: 10px;
  overflow: hidden;
}
.Navigation ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.Navigation ul li {
  width: 49%;
  height: 280px;
  margin-bottom: 5px;
  background: #fff;
}
.Navigation ul li img {
  width: 100%;
  height: 174px;
  border-radius: 10px;
  overflow: hidden;
}
.text1 {
  line-height: 23px;
  padding: 0 10px;
  color: black;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
}
.text2 {
  color: rgb(159, 159, 159);
  font-size: 12px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.text3 {
  padding: 0 10px;
  margin-bottom: 5px;
}
.span1 {
  font-size: 18px;
  color: rgb(236, 69, 9);
  font-weight: 500;
}
.span2 {
  font-size: 12px;
  color: rgb(159, 159, 159);
  text-decoration: line-through;
}
</style>